<template>
	<div v-loading="loading">
		<el-form class="w-full" ref="formRef" :model="form" label-width="auto">
			<el-form-item label="请选择要填写需求清单类型：" prop="checkList" :rules="[{ required: true, message: '请选择' }]">
				<el-checkbox-group @change="checkBoxChange" v-model="form.checkList">
					<el-checkbox
						:disabled="formType === 'view' ? true : false"
						v-for="item in checkBoxArray"
						:label="item.label"
						:value="item.value"
						:key="item.label"
						>{{ item.label }}</el-checkbox
					>
				</el-checkbox-group>
			</el-form-item>
		</el-form>
		<!-- 国家 -->
		<HyArrayForm
			:hyArrayFormConfig="hyArrayFormConfig"
			class="mt-3"
			:title="'党中央国务院决策部署'"
			ref="countryRef"
			:hyArrayFormFields="countryFields"
			:hyArrayFormDefault="countryDefault"
			v-if="form.checkList.includes('1')"
		/>
		<!-- 市级 -->
		<HyArrayForm
			:hyArrayFormConfig="hyArrayFormConfig"
			class="mt-3"
			:title="'市委市政府要求'"
			ref="cityRef"
			:hyArrayFormFields="cityFields"
			:hyArrayFormDefault="cityDefault"
			v-if="form.checkList.includes('2')"
		/>
		<!-- 地区 -->
		<HyArrayForm
			:hyArrayFormConfig="hyArrayFormConfig"
			class="mt-3"
			:title="'先进地区改革创新经验'"
			ref="areaRef"
			:hyArrayFormFields="areaFields"
			:hyArrayFormDefault="areaDefault"
			v-if="form.checkList.includes('6')"
		/>
		<!-- 群众高频需求 -->
		<HyArrayForm
			class="mt-3"
			:title="'群众高频需求'"
			ref="pepoleRef"
			:hyArrayFormFields="hyArrayFormFields1"
			:hyArrayFormConfig="hyArrayFormConfig1"
			:hyArrayFormDefault="pepoleDefault"
			v-if="form.checkList.includes('3')"
		/>
		<!-- 企业共性需求 -->
		<HyArrayForm
			class="mt-3"
			:title="'企业共性需求'"
			ref="enterpriseRef"
			:hyArrayFormFields="hyArrayFormFields2"
			:hyArrayFormConfig="hyArrayFormConfig1"
			:hyArrayFormDefault="enterpriseDefault"
			v-if="form.checkList.includes('4')"
		/>
		<!-- 基层所盼 -->
		<HyArrayForm
			class="mt-3"
			:title="'基层所盼'"
			ref="substrateRef"
			:hyArrayFormFields="hyArrayFormFields3"
			:hyArrayFormConfig="hyArrayFormConfig1"
			:hyArrayFormDefault="substrateDefault"
			v-if="form.checkList.includes('5')"
		/>
	</div>
</template>
<script setup lang="ts">
import { useDict } from '/@/hooks/dict';
import HyArrayForm from '/@/components/HyArrayForm/index.vue';
import { defaultValue } from '../../utils/default';
import { ElMessage } from 'element-plus';

const formType: any = inject('formType', 'submit');
const { countryDefault, cityDefault, pepoleDefault, enterpriseDefault, substrateDefault, areaDefault } = defaultValue();

const form: any = ref({ checkList: [] });
const formRef: any = ref();
const props: any = defineProps({
	countryData: {
		type: Array,
		default: () => {
			return [];
		},
	},
	cityData: {
		type: Array,
		default: () => {
			return [];
		},
	},
	pepoleData: {
		type: Array,
		default: () => {
			return [];
		},
	},
	enterpriseData: {
		type: Array,
		default: () => {
			return [];
		},
	},
	substrateData: {
		type: Array,
		default: () => {
			return [];
		},
	},
	areaData: {
		type: Array,
		default: () => {
			return [];
		},
	},
	checkListData: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
const loading = ref(false);
watch(
	[() => props],
	([nv1]) => {
		loading.value = true;
		if (nv1.checkListData && nv1.checkListData.length > 0) {
			form.value.checkList = nv1.checkListData;
			nextTick(() => {
				if (nv1.countryData && nv1.countryData.length > 0) {
					countryRef.value.cancel();
					nv1.countryData.forEach((item: any) => {
						countryRef.value.add(item);
					});
				}
				if (nv1.cityData && nv1.cityData.length > 0) {
					cityRef.value.cancel();
					nv1.cityData.forEach((item: any) => {
						cityRef.value.add(item);
					});
				}
				if (nv1.pepoleData && nv1.pepoleData.length > 0) {
					pepoleRef.value.cancel();
					nv1.pepoleData.forEach((item: any) => {
						pepoleRef.value.add(item);
					});
				}
				if (nv1.enterpriseData && nv1.enterpriseData.length > 0) {
					enterpriseRef.value.cancel();
					nv1.enterpriseData.forEach((item: any) => {
						enterpriseRef.value.add(item);
					});
				}
				if (nv1.substrateData && nv1.substrateData.length > 0) {
					substrateRef.value.cancel();
					nv1.substrateData.forEach((item: any) => {
						substrateRef.value.add(item);
					});
				}
				if (nv1.areaData && nv1.areaData.length > 0) {
					areaRef.value.cancel();
					nv1.areaData.forEach((item: any) => {
						areaRef.value.add(item);
					});
				}
			});
		}
		loading.value = false;
	},
	{ deep: true }
);
const { decision_demand_type, city_government_demand_type, reform_demand_type } = useDict(
	'decision_demand_type',
	'city_government_demand_type',
	'reform_demand_type'
);
interface Iitem {
	label: string;
	value: string;
	placeholder?: string;
	placeholder1?: string;
}
const checkBoxArray: Iitem[] = [
	{
		value: '1',
		label: '党中央国务院决策部署',
	},
	{
		value: '2',
		label: '市委市政府要求',
	},

	{
		value: '3',
		label: '群众高频需求',
	},
	{
		value: '4',
		label: '企业共性需求',
	},

	{
		value: '5',
		label: '基层所盼',
	},

	{
		value: '6',
		label: '先进地区改革创新经验',
	},
];
const hyArrayFormConfig = computed(() => {
	return {
		labelWidth: '120px',
		span: 22,
		offset: 0,
		type: formType.value,
	};
});
const hyArrayFormConfig1 = computed(() => {
	return {
		labelWidth: '120px',
		span: 11,
		offset: 0,
		type: formType.value,
	};
});
//国务院决策部署
const countryFields = computed(() => {
	return {
		partyDecisionDemandId: {
			type: 'input',
			label: '',
			hidden: true,
		},
		decisionDemandType: {
			label: '涉及的需求类型',
			type: 'select',
			required: true,
			span: 11,
			options: decision_demand_type.value,
		},
		demandContent: {
			label: '具体要求',
			type: 'textarea',
			required: true,
			placeholder: '请输入相关指示、批示、文件等对该项工作数字化智能化的具体要求',
		},
		fileIdList: {
			label: '佐证材料上传',
			type: 'upload',
			required: true,
			fileSize: 200,
			fileType: ['.jpg', '.jpeg', '.png'],
		},
	};
});
//市委市政府要求
const cityFields = computed(() => {
	return {
		cityGovernmentDemandId: {
			type: 'input',
			label: '',
			hidden: true,
		},
		cityGovernmentDemandType: {
			label: '涉及的需求类型',
			type: 'select',
			span: 11,
			required: true,
			options: city_government_demand_type.value,
		},
		demandContent: {
			label: '具体要求',
			required: true,
			type: 'textarea',
			placeholder: '请输入相关指示、批示、文件等对该项工作数字化智能化的具体要求',
		},
		fileIdList: {
			label: '佐证材料上传',
			type: 'upload',
			required: true,
			fileType: ['.jpg', '.jpeg', '.png'],
		},
	};
});
//先进地区改革创新经验
const areaFields = computed(() => {
	return {
		reformDemandId: {
			type: 'input',
			label: '',
			hidden: true,
		},
		reformDemandType: {
			label: '涉及的需求类型',
			type: 'select',
			required: true,
			span: 11,
			options: reform_demand_type.value,
		},
		demandContent: {
			label: '具体要求',
			type: 'textarea',
			required: true,
			placeholder: '请对比国家层面推广的先进地区经验案例，找出我市工作中还存在的短板弱项，提出补短板、强弱项的任务',
		},
		fileIdList: {
			label: '佐证材料上传',
			required: true,
			type: 'upload',
			fileType: ['.jpg', '.jpeg', '.png'],
		},
	};
});
//群众高频需求
const hyArrayFormFields1 = computed(() => {
	return {
		massesDemandId: {
			type: 'input',
			label: '',
			hidden: true,
		},
		demandDetail: {
			label: '群众高频需求',
			type: 'textarea',
			required: true,
			placeholder: '请输入群众反映的高频的、需要从体制机制、流程环节、业务协同等方面解决的问题',
		},
		solveTheProblem: {
			type: 'textarea',
			required: true,
			placeholder: '请用统计或权威调研数据说明该业务属于高频需求',
		},
		fileIdList: {
			label: '佐证材料上传',
			type: 'upload',
			required: true,
			fileSize: 200,
			span: 22,
			fileType: ['.jpg', '.jpeg', '.png'],
		},
	};
});
//企业共性
const hyArrayFormFields2 = computed(() => {
	return {
		enterpriseDemandId: {
			type: 'input',
			label: '',
			hidden: true,
		},
		demandDetail: {
			label: '企业共性需求',
			type: 'textarea',
			required: true,
			placeholder: '请输入企业反映的高频的、需要从体制机制、流程环节、业务协同等方面解决的问题',
		},
		solveTheProblem: {
			type: 'textarea',
			required: true,
			placeholder: '请用统计或权威调研数据说明该业务属于企业共性需求',
		},
		fileIdList: {
			label: '佐证材料上传',
			type: 'upload',
			required: true,
			fileSize: 200,
			span: 22,
			fileType: ['.jpg', '.jpeg', '.png'],
		},
	};
});
//基层所盼
const hyArrayFormFields3 = computed(() => {
	return {
		basicLevelDemandId: {
			type: 'input',
			label: '',
			hidden: true,
		},
		demandDetail: {
			label: '基层所盼',
			type: 'textarea',
			required: true,
			placeholder: '请输入基层反映的高频的、需要从体制机制、流程环节、业务协同等方面解决的问题',
		},
		solveTheProblem: {
			type: 'textarea',
			required: true,
			placeholder: '请用统计或权威调研数据说明该业务属于基层所盼需求',
		},
		fileIdList: {
			label: '佐证材料上传',
			type: 'upload',
			required: true,
			fileSize: 200,
			span: 22,
			fileType: ['.jpg', '.jpeg', '.png'],
		},
	};
});

const countryRef = ref();
const cityRef = ref();
const areaRef = ref();
const pepoleRef = ref();
const enterpriseRef = ref();
const substrateRef = ref();
const checkBoxChange = (selectArray: string[]) => {
	const refMap: any = {
		1: countryRef,
		2: cityRef,
		6: areaRef,
		3: pepoleRef,
		4: enterpriseRef,
		5: substrateRef,
	};
	for (const key in refMap) {
		if (selectArray.includes(key) && Object.keys(refMap[key].value.formList).length === 0) {
			refMap[key].value.add();
		}
	}
};
const getData = () => {
	const demandList: any = {
		demandListTypes: form.value.checkList,
	};
	if (form.value.checkList.includes('1')) {
		demandList.partyDecisionDemandList = countryRef?.value.submit();
	}
	if (form.value.checkList.includes('2')) {
		demandList.cityGovernmentDemandList = cityRef?.value.submit();
	}
	if (form.value.checkList.includes('3')) {
		demandList.massesDemandList = pepoleRef?.value.submit();
	}
	if (form.value.checkList.includes('4')) {
		demandList.enterpriseDemandList = enterpriseRef?.value.submit();
	}
	if (form.value.checkList.includes('5')) {
		demandList.basicLevelDemandList = substrateRef?.value.submit();
	}
	if (form.value.checkList.includes('6')) {
		demandList.reformDemandList = areaRef?.value.submit();
	}
	return demandList;
};
const check = async () => {
	let result1 = true;
	let result2 = true;
	let result3 = true;
	let result4 = true;
	let result5 = true;
	let result6 = true;
	let result7 = true;
	if (form.value.checkList.includes('1')) {
		result1 = await countryRef.value.check();
	}
	if (form.value.checkList.includes('2')) {
		result2 = await cityRef.value.check();
	}
	if (form.value.checkList.includes('3')) {
		result4 = await pepoleRef.value.check();
	}
	if (form.value.checkList.includes('4')) {
		result5 = await enterpriseRef.value.check();
	}
	if (form.value.checkList.includes('5')) {
		result6 = await substrateRef.value.check();
	}
	if (form.value.checkList.includes('6')) {
		result3 = await areaRef.value.check();
	}
	result7 = await formRef.value?.validate();
	if (result1 && result2 && result3 && result4 && result5 && result6 && result7) {
		return true;
	} else {
		ElMessage.error('表单中有必填项未填写，请检查并补全');
		return false;
	}
};

defineExpose({ check, getData });
</script>
<style scoped lang="scss"></style>
